<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;
            font-family:"微软雅黑";}
        #allmap{width:100%;height:500px;}
        #r-result{width:100%;margin-top:5px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YWfHKin7xahKGfccwU5fb7DYpsgbDzp1"></script>
    <title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
    <input type="button" onclick="add_control();" value="添加" />
    <input type="button" onclick="delete_control();" value="删除" />
    <input type="button" onclick="add_overlay();" value="添加覆盖物" />
    <input type="button" onclick="remove_overlay();" value="删除覆盖物" />
</div>

</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
//    map.centerAndZoom("上海",15);      // 初始化地图,用城市名设置地图中心点

    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));
    map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);      //开启鼠标滚轮缩放


    var pointA = new BMap.Point(116.486654,39.490295);  // 创建点坐标A--大渡口区
    var pointB = new BMap.Point(116.581515,39.615467);  // 创建点坐标B--江北区
//    alert('从大渡口区到江北区的距离是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。');  //获取两点距离,保留小数点后两位
    var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});  //定义折线
    map.addOverlay(polyline);     //添加折线到地图上


    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
    /*缩放控件type有四种类型:
     BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/

    //添加控件和比例尺
    function add_control(){
        map.addControl(top_left_control);
        map.addControl(top_left_navigation);
        map.addControl(top_right_navigation);
    }
    //移除控件和比例尺
    function delete_control(){
        map.removeControl(top_left_control);
        map.removeControl(top_left_navigation);
        map.removeControl(top_right_navigation);
    }


    var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点
    var polyline = new BMap.Polyline([
        new BMap.Point(116.399, 39.910),
        new BMap.Point(116.405, 39.920),
        new BMap.Point(116.425, 39.900)
    ], {strokeColor:"blue",  strokeWeight:2, strokeOpacity:0.5});   //创建折线
    function add_overlay() {
        map.addOverlay(marker);            //增加点
        map.addOverlay(polyline);          //增加折线
    }
    //清除覆盖物
    function remove_overlay(){
        map.clearOverlays();
    }


    // 编写自定义函数,创建标注
//    function addMarker(point){
//        var marker = new BMap.Marker(point);
//        map.addOverlay(marker);
//    }
//    // 随机向地图添加25个标注
//    var bounds = map.getBounds();
//    var sw = bounds.getSouthWest();
//    var ne = bounds.getNorthEast();
//    var lngSpan = Math.abs(sw.lng - ne.lng);
//    var latSpan = Math.abs(ne.lat - sw.lat);
//    for (var i = 0; i < 25; i ++) {
//        var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
//        addMarker(point);
//    }



//    var beijingPosition=new BMap.Point(116.432045,39.910683),
//        hangzhouPosition=new BMap.Point(120.129721,30.314429),
//        taiwanPosition=new BMap.Point(121.491121,25.127053);
//    var points = [beijingPosition,hangzhouPosition, taiwanPosition];
//    var curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
//    map.addOverlay(curve); //添加到地图中


//    //单击获取点击的经纬度
//    map.addEventListener("click",function(e){
//        alert(e.point.lng + "," + e.point.lat);
//    });
</script>